<template>
    <div class="message_box">
        <div class="top">
            <div class="comment">
                <img
                    :src="store.user_info.user_img"
                    alt="" />
                <span>{{ store.user_info.user_name }}</span>
            </div>
            <textarea
                v-model="comment_txt"
                placeholder="请输入评论"></textarea>
            <div class="btn">
                <el-button @click="release_blog">评论</el-button>
            </div>
        </div>
        <div class="down" v-loading="is_loading" element-loading-text="数据加载中" element-loading-background="background-color: rgba(255, 255, 255, 1)">
            <div
                class="comment_container"
                ref="comment_container">
                <comment
                    v-for="item in message_list"
                    :key="item.id"
                    :message="item.message"
                    :time="item.time"
                    :user_img="item.user_img"
                    :user_name="item.user_name">
                </comment>
            </div>
            <div class="pagination">
                <div
                    class="no_data"
                    v-if="total === 0">
                    暂无数据
                </div>
                <el-config-provider :locale="locale">
                    <el-pagination
                        v-model:current-page="page_number"
                        v-model:page-size="page_size"
                        :page-sizes="page_size_list"
                        size="small"
                        :background="true"
                        layout="jumper, prev, pager, next, sizes, total"
                        :total="total"
                        :disabled="disabled"
                        :pager-count="6"
                        @size-change="handle_size_change"
                        @current-change="handle_current_change" />
                </el-config-provider>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { el_message } from '@/utils/el_message';
import { useIndexStore } from '@/store/model/index';
import { add_message, msg_paging, get_msg_count } from '@/axios/home/index';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import comment from '@/components/comment/index.vue';
import { nextTick } from 'process';
const store = useIndexStore();

const comment_txt = ref('');
const page_size = ref(10);
const page_number = ref(1);
const page_size_list = [10, 20, 30, 40];
const total = ref(0);
const disabled = ref(false);
const message_list = ref([]);
const comment_container = ref(null);
const locale = zhCn;
const is_loading = ref(false)

onMounted(async () => {
    let count = await get_msg_count();
    total.value = count.data.count;
    await update_paging();
});

const release_blog = async () => {
    if (comment_txt.value.trim() === '') {
        el_message('请输入评论内容!', 'warning');
        return;
    }
    const message_data = await add_message({
        time: new Date().getTime(),
        message: comment_txt.value,
    });
    comment_txt.value = '';
    if (message_data.code !== 200) {
        return;
    }
    await update_paging();
};
const handle_size_change = async (size) => {
    page_size.value = size;
    await update_paging();
};
const handle_current_change = async (number) => {
    page_number.value = number;
    await update_paging();
};
const update_paging = async () => {
    is_loading.value = true
    // 每次更新数据都要先禁用分页器，等数据更新完再启用
    disabled.value = true;
    if (Math.ceil(total.value / page_size.value) < page_number.value) {
        disabled.value = false;
        return;
    }
    let data = await msg_paging({
        page_size: page_size.value,
        page_number: page_number.value,
    });
    total.value = data.data.count;
    message_list.value = data.data.message_list;
    nextTick(() => {
        if (comment_container.value) {
            // 滚动到元素所在的位置
            // 这里使用 formElement.offsetTop 获取元素相对于文档顶部的偏移量
            // 你可以根据需要调整第二个参数（垂直方向滚动的偏移量）
            window.scrollTo({
                top: comment_container.value.offsetTop,
                behavior: 'auto', // 平滑滚动，可选参数，也可以设置为 'auto'（瞬间跳转）
            });
        }
    });
    disabled.value = false;
    is_loading.value = false
};
</script>

<style scoped lang="less">
.message_box {
    width: 100%;

    .top {
        width: 100%;
        margin-bottom: 0.8rem;
        background-color: @tmb;
        border-radius: 0.12rem;

        .comment {
            height: 1rem;
            display: flex;
            align-items: center;
            margin: 0.4rem 0 0 1rem;

            img {
                width: 0.8rem;
                height: 0.8rem;
                border-radius: 50%;
            }

            span {
                font-size: 0.24rem;
                margin-left: 0.4rem;
                color: @qls;
            }
        }

        textarea {
            width: 13.2rem;
            height: 2rem;
            margin: auto;
            display: block;
            background-color: @tmb;
            outline-style: none;
            border: 0.01rem solid @qls;
            color: @qls;
            font-weight: 700;
            font-size: 0.2rem;
            overflow-y: auto;
            /* 垂直滚动条 */
            resize: none;
            border-radius: 0.05rem;

            /* 自定义滚动条样式 */
            &::-webkit-scrollbar {
                width: 0.1rem;
                /* 滚动条的宽度 */
            }

            &::-webkit-scrollbar-thumb {
                background-color: @qls;
                /* 滚动条滑块的颜色 */
                border-radius: 0.05rem;
            }

            &::-webkit-scrollbar-thumb:hover {
                cursor: pointer;
                /* 滑块在悬停时的颜色 */
            }

            &::-webkit-scrollbar-track {
                background-color: @tmb;
                /* 滚动条轨道的颜色 */
                border-radius: 0.05rem;
            }
        }

        .btn {
            width: 13.2rem;
            margin: auto;
            display: flex;
            justify-content: flex-end;
            padding-bottom: 0.4rem;
        }
    }

    .down {
        overflow: hidden;
        width: 100%;
        background-color: @tmb;
        border-radius: 0.12rem;
        padding: 0.2rem 0;

        .comment_container {
            overflow-y: auto;
        }
        .pagination {
            width: 100%;
            padding-top: 0.2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            .no_data {
                width: 100%;
                padding-bottom: 0.1rem;
                font-size: 0.2rem;
                font-weight: 900;
                color: @hui_font;
                text-align: center;
            }
            .el-pagination {
                :deep(.el-input--small) {
                    width: 24px !important;
                    height: 24px !important;
                }
                :deep(.el-input__wrapper) {
                    padding: 0 !important;
                }
                :deep(.el-pagination--small .el-select ){
                    width: 80px !important;
                }
            }
        }
    }
}
</style>
